<template>

  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      :key="item.name"
      v-for="(item, index) in editableTabs"
      :label="item.title"
      :name="item.name"
    >
      <component :is="item.content"></component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
    export default {
        name: "EmpMain",
      data() {
        return {
          editableTabsValue: '1',
          editableTabs: [{
            title: '公告',
            name: '1',
            content: 'SysNoticePage'
          },],
          tabIndex: 1
        }
      },
      methods: {
        addTab(key,keyPath) {
          //console.log("addtab,emomain",key, keyPath);
          let newTabName = ++this.tabIndex + '';
          this.editableTabs.push({
            title: key,
            name: newTabName,
            content: keyPath
          });
          this.editableTabsValue = newTabName;
          //console.log("我是empMain",targetName);
        },
        removeTab(targetName) {
         // this.$store.commit('removeTag',targetName);
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }

          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
    }
    }
</script>

<style scoped>

</style>
